<template>
  <div class="wrap"   >
    <div class="title">
      <img src="../../images/main/par.png" alt> 合伙人管理
    </div>
    <div class="screen">
      <img src="../../images/main/screen.png" alt> 筛选查询
    </div>
    <div class="sel">
      <div class="txt">关键词：</div>
      <input type="text" placeholder="合伙人名称/手机号" v-model="params.keyWord">
      <div class="btn" style="cursor: pointer;" @click="getParManList()">搜索</div>
    </div>
    <div class="clear"></div>
    <div class="table">
      <div class="thead">合伙人列表
        <div v-if="roleList.indexOf('增加合伙人') != '-1'" class="addpar" @click="addParMan()">
          <img class="add" src="../../images/main/add.png" alt> 增加合伙人
        </div>
      </div>
      <div class="sthead">
        <div class="parname">合伙人/企业名称</div>
        <div class="parnum">合伙人账号</div>
        <div class="phone">手机号</div>
        <div class="area">经营区域</div>
        <div class="monkey">平台佣金</div>
        <div class="date">加盟期限</div>
        <div class="update">更新时间</div>
        <div class="state">当前状态</div>
        <div class="ctrl lastlist">操作</div>
      </div>

      <div
        class="empty"
        v-if="!userList || userList.length == 0"
        :style="{
          color: '#aaa',
          textAlign: 'center',
          padding: '50px 0',
          fontSize: '20px'
        }"
        >
        暂无相关信息
      </div>

      <div class="tlists">
        <div class="tlist" v-for="(item,index) in userList" :key="index">
          <div class="parname"><div>{{item.partner_name ? item.partner_name : '-'}}</div></div>
          <div class="parnum"><div>{{item.partner_account ? item.partner_account : '-'}}</div></div>
          <div class="phone"><span>{{item.partner_phone ? item.partner_phone : '-'}}</span></div>
          <div class="area"><span>{{item.region ? item.region : '-'}}</span></div>
          <div class="monkey"><span>{{item.commission ? item.commission + '%' : '-'}}</span></div>
          <div class="date"><span>{{item.join_age ? item.join_age + '年' : '-'}}</span></div>
          <div class="update">
            <div v-if="item.time">
              <div class="day">{{setDate(item.time)}}</div>&nbsp;
              <div class="time">{{setTime(item.time)}}</div>
            </div>
            <div v-else>-</div>
          </div>
          <div class="state">{{(item.states == 0) ? '正常' : '冻结中'}}</div>
          <div class="ctrl lastlist">
            <ul>
              <li v-if="roleList.indexOf('分佣设置') != '-1' && roleList.indexOf('合伙人管理') != '-1'" class="firli" @click="subCommission(item.id)">分佣设置</li>
              <li v-if="roleList.indexOf('编辑合伙人') != '-1'" class="firli" @click="editParMan(true,item.id)">编辑</li>
              <li v-if="roleList.indexOf('编辑合伙人') != '-1'" @click="resetPwd( item.id )">重置密码</li>
              <li v-if="roleList.indexOf('合伙人管理') != '-1'" @click="partnerDeatils(item.id)">详情</li>
              <li v-if="roleList.indexOf('收款账号') != '-1'" @click="accParMan(item.id)">收款账号</li>
              <li v-if="roleList.indexOf('冻结/解除冻结') != '-1' && roleList.indexOf('合伙人管理') != '-1'" @click="setFrozen(item.states,item.id)"> {{item.states == 0  ? '冻结' : '取消冻结'}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <el-pagination
      v-show="userList && userList.length > 0"
      :background="true"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      layout="total, prev, pager, next, jumper"
      :total="params.total"
      style="text-align:center;margin:20px auto;">
    </el-pagination>
  </div>
</template>

<script>
import Global from '../tool/Global.vue'
import axios from 'axios'
import qs from 'qs' // 将请求转换成form 表单提交形式
export default {
  data() {
    return {
      loading: false,
      params: {
        page: 1,
        limit: 10,
        keyWord: "",
        total: 10
      },
      userList:[],
      roleList:''
    };
  },
  methods: {
    /**
     *  获取权限
     */
    getRole: function () {

      let that = this;
      axios({
          method: 'post',
          url:`${that.$store.state.url}/sysPermission/selectByEmployeeId`,
            data:qs.stringify({
              empId:that.$cookie.get('pid')
            })
      }).then(res => {
            // console.log(res)
            let arr = res.data.data
            let role = []
            for(let i = 0; i < arr.length; i++) {
             role.push(arr[i].name)
            }
            // console.log(arr)
            this.$store.commit("UPDATE_NAV_PERMISSION",arr)
            this.roleList = role.toString()
            // this.roleList = this.roleList
        });
    },
    // 重置密码
    resetPwd( id ) {
        // this.$prompt(
        //   '输入新密码', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消'
        // }).then(({ value }) => {
        //   console.log ( value );

        // }).catch(() => {

        // });
        this.$confirm ( '确定重置密码？' ).then (() => {
          axios.post (
            `${this.$store.state.url}/tPartner/updatePwd`,
            qs.stringify({
              id: id,
              // pwd: value
            })
          ).then ( (response) => {
            this.$store.state.fn.success( response.data.msg );
          })
        })
    },

    // 分页
    handleCurrentChange: function (index) {
      let that = this
      that.params.page = index
      that.getParManList()
    },
    // 增加合伙人
    addParMan() {
      this.$router.push ({
        path: '/main/addParMan'
      });
    },
    /**
     * 增加或者修改合伙人
     */
    editParMan: function(bol,id) {
      if(bol) {
        Global.userId = id
        Global.userEdit = true
      } else {
        Global.userEdit = false
      }
      this.$router.push({
        path: "/main/editParMan",
        query: {
          id: id
        }
      });
    },
    /**
     * 修改合伙人账户
     */
    accParMan: function(id) {
      Global.userId = id
      this.$router.push({
        path: "/main/accParMan",
        query: {
          id: id
        }
      });
    },
    // 分佣设置
    subCommission: function(id) {
      Global.userId = id
      this.$router.push({
        path: "/main/subCommission"
      });
    },
    //  合伙人详情
    partnerDeatils: function(id) {
        Global.userId = id
      this.$router.push({
        path: "/main/partnerDetails"
      });
    },
    /**
     * 冻结/解冻
     */
    setFrozen: function (states,id) {
      let that = this;
      if (states == 0) {
        states = 1
      } else {
        states = 0
      }

      this.$confirm  ( states === 0 ? '是否解除冻结?' : '是否确认冻结?' ).then (() => {
        let data = {
          states:states,
          id:id
        }
        axios({
            method: 'post',
            url:`${that.$store.state.url}/tPartner/updateStates`,
              data:qs.stringify(data)
        }).then(res => {
            console.log(res)
          if (res.data.code == 0) {
            this.$store.state.fn.success( states === 0 ? '解除冻结成功' : '确认冻结成功' );
            that.getParManList()
          } else {
            alert(res.msg);
          }
        });
      });
    },
    /**
     * 获取合伙人列表
     */
    getParManList: function() {
      let that = this;
      this.loading = true;
      axios({
          method: 'post',
          url:`${that.$store.state.url}/tPartner/getPartnerList`,
            data:qs.stringify(that.params)
      }).then(res => {
        this.loading = false;
          // console.log(res)
        if (res.data.code == 0) {
          that.userList = res.data.data
          that.params.total = res.data.count
        } else {
          alert(res.msg);
        }
      });
    },
    /**
     * 根据时间毫秒数 返回年月日
     */
    setDate: function (str) {
        // let times = new Date(str)
        // return `${times.getFullYear()}-${times.getMonth()+1 < 10 ? '0' + times.getMonth()+1 : times.getMonth()+1}-${times.getDate() < 10 ? '0' + times.getDate() : times.getDate()}`
        return this.$moment(str).format('YYYY-MM-DD')
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function (str) {
        // let times = new Date(str)
        // return `${times.getHours() < 10 ? '0' + times.getHours() : times.getHours()}:${times.getMinutes() < 10 ? '0' + times.getMinutes() : times.getMinutes()}:${times.getSeconds() < 10 ? '0' + times.getSeconds() : times.getSeconds()}`
        return this.$moment(str).format('hh:mm:ss')
    },
  },
  mounted () {
      this.getParManList()
      this.getRole()
  }
};
</script>
<style scoped type="text/scss" lang="scss">
.wrap {
  /* padding: 68px 136px; */
  /* width: 100%; */
  width: 90%;
  margin: 40px auto;
}
.title {
  height: 33px;
  line-height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: bold;
}
.title img {
  width: 28px;
  height: 26px;
  float: left;
  padding-top: 5px;
  margin-right: 10px;
}
.screen {
  /* width: 1490px; */
  height: 60px;
  background: #f6f6f6;
  /* margin-left: 38px; */
  margin-top: 24px;
  line-height: 60px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #888888;
}
.screen img {
  float: left;
  width: 27px;
  height: 27px;
  margin-left: 10px;
  margin-top: 16px;
  margin-right: 18px;
}
.sel {
  margin-top: 27px;
  /* padding-left: 38px; */
  height: 40px;
  line-height: 40px;
}
.sel .txt {
  float: left;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  font-weight: bold;
  width: 73px;
}
.sel input {
  float: left;
  background: #ffffff;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  width: 317px;
  height: 40px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #888888;
  margin-left: 17px;
  text-align: center;
  box-sizing: border-box;
}
.btn {
  float: left;
  color: #fff;
  background: #085dab;
  border: 1px solid #085dab;
  width: 140px;
  height: 38px;
  text-align: center;
  margin-left: 37px;
}
.table {
  /* width: 1490px; */
  margin-top: 43px;
  /* margin-left: 38px; */
}
.table .sthead {
  border-bottom: 1px solid #dddddd;
  height: 67px;
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #000000;
  line-height: 67px;
  font-weight: bold;
  background: #e0eefe;
}
.parname {
  /* width: 187px; */
  width: 15%;
  white-space:normal; word-break:break-all;
}
.parname div {
  white-space:normal; word-break:break-all;
}
.sthead > div {
  float: left;
  border-left: 1px solid #ddd;
  text-align: center;
  box-sizing: border-box;
}
.parnum {
  /* width: 149px; */
  width: 10%;
  white-space:normal; word-break:break-all;
}
.parnum div {
  word-wrap:break-word;
  white-space:normal; word-break:break-all;
}
.phone {
  /* width: 162px; */
  width: 10%;
}
.area {
  /* width: 137px; */
  width: 10%;
}
.monkey {
  /* width: 147px; */
  width: 10%;
}
.date {
  /* width: 140px; */
  width: 10%;
}
.update {
  /* width: 184px; */
  width: 13%;
}
.tlist .update {
  line-height: 25px;
  /* padding-top: 43px; */
  height: 142px;
}
.day,
.time {
  height: 25px;
  line-height: 25px;
}
.state {
  /* width: 142px; */
  width: 10%;
}
.table .thead {
  text-align: left;
  font-family: PingFangSC-Medium;
  font-size: 24px;
  color: #000000;
  height: 69px;
  line-height: 69px;
  padding-left: 15px;
  background: #e0eefe;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  font-weight: bold;
}
.addpar {
  background: #f6f6f6;
  border: 1px solid #085dab;
  border-radius: 2px;
  // width: 107px;
  height: 33px;
  float: right;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  line-height: 33px;
  margin-top: 17px;
  margin-right: 20px;
  color: #085dab;
  cursor: pointer;
  padding: 0 5px;
}
.add {
  width: 18px;
  height: 18px;
  float: left;
  margin: 8px;
}
/* .table div {
        font-family: PingFangSC-Medium;
        font-size: 18px;
        color: #4a4a4a;
        border: 1px solid #dddddd;
        height: 142px;
        text-align: center;
    } */
.ctrl {
  /* width: 242px; */
  width: 12%;
}
.tlist {
  height: 142px;
  /* line-height: 142px; */
  border-bottom: 1px solid #ccc;
}
.lastlist {
  border-right: 1px solid #ddd;
  display: flex;
  flex-direction: row;
  justify-content: center
}
.tlist > div {
  float: left;
  text-align: center;
  border-left: 1px solid #ddd;
  box-sizing: border-box;
  height: 142px;
  line-height: 24px;
  display: flex;
  align-items:center;
  justify-content:center;


}
.tlist:last-of-type {
  border-bottom: 1px solid #ddd;
}
.ctrl ul {
  width: 90%;
  // margin-top: 20px;
  /* padding: 18px 19px 20px 31px; */
  height: 104px;
}
.ctrl ul li {
  float: left;
  width: 50%;
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #085dab;
  margin-top: 15px;
  font-weight: bold;
  cursor: pointer;
}
.ctrl ul li:nth-of-type(2n) {
  /* margin-left: 35px; */
}
.ctrl .firli {
  margin-top: 0px;
}
.clear {
  clear: both;
}
</style>
